<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt"  prefix="fmt_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page language="java" 
	import="java.util.*" 
	import="com.jp.fm.data.*"
	pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
	<head>
    	<base href="<%=basePath%>">
    
    	<title>HFM: Trends</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
	 
 		<link rel="stylesheet" href="jquery-ui-1.10.0.custom/css/cupertino/jquery-ui-1.10.0.custom.css" />
		<script src="jquery-ui-1.10.0.custom/js/jquery-1.9.0.js"></script>
  		<script src="jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js"></script>
  		
  		<style type="text/css">    
    		fieldset { padding:0; border:0; margin-top:25px; }
 		 </style>
 
  		<link rel="stylesheet" href="css/fm.css" />	
  		
  		<script src="Highcharts-2.3.5/js/highcharts.js"></script>
  		  	
  		<script language="javascript" type="text/javascript">
  		$(function () {
		    var chart;
		    $(document).ready(function() {
		        chart = new Highcharts.Chart({
		            chart: {
		                renderTo: 'categoriesPieChart',
		                plotBackgroundColor: null,
		                plotBorderWidth: null,
		                plotShadow: false
		            },
		            title: {
		                text: 'Top Categories <c:out value="${categoryPieTitle}"/>'
		            },
		            tooltip: {
		        	    pointFormat: '{series.name}: <b>{point.y}</b>',
		        	    valueDecimals: 2,
            			valuePrefix: '$'
		            },
		            plotOptions: {
		                pie: {
		                    allowPointSelect: true,
		                    cursor: 'pointer',
		                    percentageDecimals: 1,
		                    dataLabels: {
		                        enabled: true,
		                        color: '#000000',
		                        connectorColor: '#000000',		                      
		                        formatter: function() {
		                            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2, '.', '') +' %';
		                        }		                        
		                    },
		                	events: {
                    			click: function(event) {   
                        			location.href = '/fm/secured/ShowTransactions?searchCategoryName=' + event.point.name + '&startDateDatepicker=<c:out value='${topCatsStartDate}'/>&endDateDatepicker=<c:out value='${topCatsEndDate}'/>';
                    			}
                			}
		                }
		            },
		            series: [{
		                type: 'pie',
		                name: 'Total Spent',
		                data: [		
		                <c:set var="topCatCounter" value="0" />
		                <c:set var="topCategoriesThisMonthLen" value="${fn:length(topCategories) - 1}" />	                
		                <c:forEach var="entry" items = "${topCategories}">		    			
		    				['<c:out value='${entry.value.name}'/>',  <c:out value='${entry.key}'/>]<c:if test="${topCatCounter lt topCategoriesThisMonthLen}">,</c:if>
		    				<c:set var="topCatCounter" value="${topCatCounter+1}" />		
		                </c:forEach>
		                                		                
		                ]
		            }]
		        });
		    });
		    
		});
		
		$(function () {
		    var chart;
		    $(document).ready(function() {
		        chart = new Highcharts.Chart({
		            chart: {
		                renderTo: 'balanceOverTimeChart',
		                type: 'line',
		                marginRight: 130,
		                marginBottom: 30
		            },
		            title: {
		                text: 'Account Balance Last Six Months',
		                x: -20 //center
		            },
		            xAxis: {
		                categories: [
		                <c:set var="monthCounter" value="0" />
		                <c:set var="balanceMonthListLen" value="${fn:length(balanceMonthList) - 1}" />
		                <c:forEach var="month" items = "${balanceMonthList}">
		                	'<c:out value='${month}'/>'<c:if test="${monthCounter lt balanceMonthListLen}">,</c:if>
		                	<c:set var="monthCounter" value="${monthCounter+1}" />		                
		                </c:forEach>
		                ]
		            },
		            yAxis: {
		                title: {
		                    text: ''
		                },
		                tickInterval: 1000,
		                labels: {
			                formatter: function() {
			                    return '$' + Highcharts.numberFormat(this.value, 2, '.', '');
			                }
			            },
		                plotLines: [{
		                    value: 0,
		                    width: 1,
		                    color: '#808080'
		                }]
		            },
		            tooltip: {
		            	pointFormat: '{series.name}: {point.y}',
		        	    valueDecimals: 2,
            			valuePrefix: '$'
		            },
		            legend: {
		                layout: 'vertical',
		                align: 'right',
		                verticalAlign: 'top',
		                x: -10,
		                y: 100,
		                borderWidth: 0
		            },
		            series: [
		            <c:set var="aveBalCounter" value="0" />
		            <c:set var="accountAverageBalMapLen" value="${fn:length(accountAverageBalMap) - 1}" />
		            <c:forEach var="aveBalEntry" items="${accountAverageBalMap}">
		            {
		                name: "<%=((Map.Entry)pageContext.getAttribute("aveBalEntry")).getKey()%>",
		                data: [
		                <c:set var="aveBalEntryCounter" value="0" />
			            <c:set var="aveBalEntryListLen" value="${fn:length(aveBalEntry.value) - 1}" />
		                <c:forEach var="aveBalValue" items="${aveBalEntry.value}">
		                	<c:out value='${aveBalValue}' />
		                	<c:if test="${aveBalEntryCounter lt aveBalEntryListLen}">,</c:if>
		            		<c:set var="aveBalEntryCounter" value="${aveBalEntryCounter+1}" />		                
		                </c:forEach>
		                ]
		            }
		            	<c:if test="${aveBalCounter lt accountAverageBalMapLen}">,</c:if>
		            	<c:set var="aveBalCounter" value="${aveBalCounter+1}" />
		            </c:forEach>
		            ]
		        });
		    });
		    
		});
		
		$(function () {
		    var chart;
		    $(document).ready(function() {
		        chart = new Highcharts.Chart({
		            chart: {
		                renderTo: 'budgetsOverTimeChart',
		                type: 'bar'
		            },
		            title: {
		                text: 'Budgets For <fmt:formatDate pattern="MMMM, yyyy" value="${budgetSelectDate}" />'
		            },
		            xAxis: {
		                categories: [<c:out value='${budgetCategoryStr}' escapeXml="false"/>],
		                title: {
		                    text: null
		                }
		            },
		            yAxis: {
		                min: 0,
		                title: {
		                    text: 'Budget (dollars)',
		                    align: 'high'
		                },
		                labels: {
		                    overflow: 'justify'
		                }
		            },
		            tooltip: {
		                formatter: function() {
		                    return ''+
		                        this.series.name +': $'+ this.y;
		                }
		            },
		            plotOptions: {
		                bar: {
		                    dataLabels: {
		                        enabled: true
		                    },
		                    events: {
                    			click: function(event) {   
                        			location.href = '/fm/secured/ShowTransactions?searchCategoryName=' + event.point.category + '&startDateDatepicker=<fmt:formatDate pattern="MM/dd/yyyy" value="${budgetSelectDate}" />&endDateDatepicker=<fmt:formatDate pattern="MM/dd/yyyy" value="${budgetEndDate}" />';
                    			}
                			}
		                }
		            },
		            legend: {
		                layout: 'vertical',
		                align: 'right',
		                verticalAlign: 'top',
		                x: -100,
		                y: 100,
		                floating: true,
		                borderWidth: 1,
		                backgroundColor: '#FFFFFF',
		                shadow: true
		            },
		            credits: {
		                enabled: false
		            },
		            series: [{
		                name: 'Budget Used',
		                color: '#AA4643',
		                data: [<c:out value='${budgetCatAmountStr}' />]
		            }, {
		                name: 'Budgeted Amount',
		                color: '#4572A7',
		                data: [<c:out value='${budgetAmountStr}' />]
		            }]
		        });
		    });
		    
		});
   		</script> 
  		  		   
	</head>
	<body>
  		<div id="page" class="page">


			<%@ include file="Header.jsp" %> 
	    	<%--<jsp:include page='Header.jsp' flush="true" />--%>

			<div id="main" class="main">		
			
				<jsp:include page='LeftBar.jsp' flush="true" />		   
		    	
		    	<div id="mainbody" class="mainbody">
		    		    	
		    		<div id="bodycontent" class="bodycontent">
		    			<form id="trendsForm" action="/fm/secured/ShowTrends" method="post">
		    			
		    			<div id="categoryPieSection" class="section">
		    				<fieldset><legend></legend>
		    				<label for="categoryPieSelect">Time frame</label>
		    				<select name="categoryPieSelect" id="categoryPieSelect" onChange="this.form.submit()">
		    					<c:forEach var="timeFrameEntry" items = "${timeFrameMap}">
		    						<option value="<c:out value='${timeFrameEntry.value}' />" 
		    							<c:if test="${timeFrameEntry.value eq categoryPieSelect}">
		    								<c:out value='selected="true"' />
		    							</c:if>>
		    							<c:out value='${timeFrameEntry.key}' />
		    						</option>
		    					</c:forEach>
		    				</select>
		    				</fieldset>
<%--
Pie chart of categories over last X months with select box for updating chart
--%>
							<div id="categoriesPieChart" style="min-width: 300px; height: 300px; margin: 0 auto;">
							</div>
		    			</div>
		    			<div id="budgetsOverTimeSection" class="section">
		    			<fieldset><legend></legend>
		    				<label for="budgetSelect">Time frame</label>
		    				<select name="budgetSelect" id="budgetSelect" onChange="this.form.submit()">
		    					<c:forEach var="budgetTimeFrameEntry" items = "${budgetTimeFrameMap}">
		    						<option value="<c:out value='${budgetTimeFrameEntry.value}' />" 
		    							<c:if test="${budgetTimeFrameEntry.value eq budgetSelect}">
		    								<c:out value='selected="true"' />
		    							</c:if>
		    							>
		    							<fmt:formatDate pattern="MMMM, yyyy" value="${budgetTimeFrameEntry.key}" />
		    						</option>
		    					</c:forEach>
		    				</select>
		    				</fieldset>
<%--
Budgets over last 6 months
--%>
							<div id="budgetsOverTimeChart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
		    			</div>		    			
		    			<div id="balanceOverTimeSection" class="section">
<%--
Account balances over last 6 months
Plot graph
--%>
							<div id="balanceOverTimeChart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
		    			</div>
		    			</form>	
		    		</div>
		    	</div>
			</div>	  
			<%@ include file="Footer.jsp" %> 
			<%--<jsp:include page='Footer.jsp' flush="true" />--%>  
		</div>				
	</body>
</html>

